<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>管理控制台</title>
  <link href="/static/system/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/static/system/plugins/material-design-icons/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="/static/system/plugins/bootstrap-multitabs/multitabs.min.css">
  <link href="/static/system/css/style.css" rel="stylesheet">
  <script type="text/javascript" src="/static/system/plugins/jquery/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="/static/system/plugins/bootstrap/bootstrap.min.js"></script>
  <script type="text/javascript" src="/static/system/plugins/scrollbar/perfect-scrollbar.min.js"></script>
  <script type="text/javascript" src="/static/system/plugins/bootstrap-multitabs/multitabs.js"></script>
  <script type="text/javascript" src="/static/system/plugins/layer/layer.js"></script>
  <script type="text/javascript" src="/static/system/js/layout.js"></script>
</head>

<body>
  <div class="layout-web">
    <div class="layout-container">
      <!--左侧导航-->
      <aside class="layout-sidebar">
        <!-- logo -->
        <div id="logo" class="sidebar-header">
          <a href="/system/index/index.html">管理控制台</a>
        </div>
        <div class="layout-sidebar-scroll">
          {include file="index/nav"}
        </div>
      </aside>
      <!--End 左侧导航-->
      <!--头部信息-->
      <header class="layout-header">
        <nav class="navbar navbar-default">
          <div class="topbar">
            <div class="topbar-left">
              <div class="aside-toggler">
                <span class="toggler-bar"></span>
                <span class="toggler-bar"></span>
                <span class="toggler-bar"></span>
              </div>
            </div>
            <ul class="topbar-right">
              <li class="dropdown dropdown-profile">
                <a href="javascript:void(0)" data-toggle="dropdown">
                  <span>{$user.name} <span class="caret"></span></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li><a class="multitabs" data-url="/system/admin/info.html" href="javascript:void(0)"><i
                        class="mdi mdi-account"></i> 账户信息</a></li>
                  <li><a class="multitabs" data-url="/system/admin/change.html" href="javascript:void(0)"><i
                        class="mdi mdi-lock-outline"></i> 修改密码</a></li>
                  <li><a id="clear-cache" href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                  <li class="divider"></li>
                  <li>
                    <a href="javascript:" id="login-out"><i class="mdi mdi-logout-variant"></i> 退出登录</a>
                  </li>
                </ul>
              </li>
              <!--切换主题配色-->
              {include file="index/theme"}
              <!--切换主题配色-->
            </ul>
          </div>
        </nav>
      </header>
      <!--End 头部信息-->
      <!--页面主要内容-->
      <main class="layout-content">
        <div id="iframe-content"></div>
      </main>
      <!--End 页面主要内容-->
    </div>
  </div>
  <script>
    $(function () {
      $('#clear-cache').on('click', function () {
        layer.confirm('确认清楚缓存吗？', { icon: 3, title: '提示' }, function (index) {
          $.ajax({
            url: "/system/index/clear.html",
            type: "post",
            dataType: "json",
            success: function () {
              layer.msg('缓存清除成功');
            }
          });
          layer.close(index);
        });
      });
      $('#login-out').on('click', function () {
        layer.confirm('确认退出吗？', { icon: 3, title: '提示' }, function (index) {
          $.ajax({
            url: "/system/index/quit.html",
            type: "post",
            dataType: "json",
            success: function () {
              location.href = "/system/public/login.html";
            }
          });
          layer.close(index);
        });
      });
      // 设置主题配色
      theme();
    });

    function theme() {
      var body = $('body');
      var logo_bg_obj = $("input[name='logo_bg']");
      var header_bg_obj = $("input[name='header_bg']");
      var sidebar_bg_obj = $("input[name='sidebar_bg']");
      var logo_bg = localStorage.getItem('logo_bg') || 'default';
      var header_bg = localStorage.getItem('header_bg') || 'default';
      var sidebar_bg = localStorage.getItem('sidebar_bg') || 'default';
      body.attr('data-logobg', logo_bg);
      body.attr('data-headerbg', header_bg);
      body.attr('data-sidebarbg', sidebar_bg);
      logo_bg_obj.prop('checked', false);
      $("input[name='logo_bg'][value='" + logo_bg + "']").prop('checked', true);
      header_bg_obj.prop('checked', false);
      $("input[name='header_bg'][value='" + header_bg + "']").prop('checked', true);
      sidebar_bg_obj.prop('checked', false);
      $("input[name='sidebar_bg'][value='" + sidebar_bg + "']").prop('checked', true);
      logo_bg_obj.click(function () {
        localStorage.setItem('logo_bg', $(this).val());
        body.attr('data-logobg', $(this).val());
      });
      header_bg_obj.click(function () {
        localStorage.setItem('header_bg', $(this).val());
        body.attr('data-headerbg', $(this).val());
      });
      sidebar_bg_obj.click(function () {
        localStorage.setItem('sidebar_bg', $(this).val());
        body.attr('data-sidebarbg', $(this).val());
      });
    }
  </script>
</body>

</html>